<template>
  <div class="page">

    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="预约时间：">
          <el-date-picker v-model="formInline.orderTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约城市：">
          <city-select v-model="formInline.cities"></city-select>
        </el-form-item>
        <el-form-item label="预约医院：">
          <hospital-select v-model="formInline.hospitals"></hospital-select>
        </el-form-item>
        <el-form-item label="责任人：">
          <user-select v-model="formInline.principals"></user-select>
        </el-form-item>
        <el-form-item label="预约状态：">
          <el-select v-model="formInline.orderStatus" class="a_select" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in BOOKSTATUSLIST" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词：">
          <el-input v-model="formInline.term" placeholder="请输入客户电话/姓名"></el-input>
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="getList(1)">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small" @click="openImportDialog('importDialog')">批量导入</el-button>
        <el-button type="default" size="small" :loading="eloading" @click="downloadExcel()">批量导出</el-button>
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" :data="tableData">
        <el-table-column prop="departmentName" label="客户信息" width="150">
          <template slot-scope="{row}">
            <tab-user :user="userFormatter(row)" v-if="row"></tab-user>
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="预约医院" />
        <el-table-column prop="appointmentTime" label="预约时间" />
        <el-table-column prop="principal" label="责任人" />
        <el-table-column prop="statusDesc" label="预约状态" />
        <el-table-column prop="address" label="操作" width="80" align="center">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="openDialog(row)">处理</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal" :page-size="pageSize" :page-sizes="pageSizes" :current-page.sync="pageNumber" @current-change="getList" @size-change="changePageSize" />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 批量导入 开始 -->
    <glsx-dialog :show="importDialog" title="批量导入" @close="closeDialog('importDialog')">
      <div class="upload_box">
        <div class="cell" v-if="!isSuccess">
          <div class="name"><span class="cred">*</span>选择要导入的名单：</div>
          <div class="txt">
            <el-input v-model="uploadInfo.name" class="a_input" size="small" readonly></el-input>
            <el-upload class="el_upload" ref="upload" :headers="uploadHeader" :accept="fileAccept" :action="SAVE_APPOINTMENTHANDLE_HIMPORT" :auto-upload="false" :show-file-list="false" :on-change="onFileChange" :on-success="onSuccess">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
            </el-upload>
          </div>
        </div>
        <div class="success_tips" v-if="isSuccess">
          <i class="el-icon-circle-check icon"></i>
          <span>成功导入</span>
          <span class="cred">{{uploadSuccessInfo.succNum}}</span>
          <span>位客户，失败</span>
          <span class="cred">{{uploadSuccessInfo.failNum}}</span>
          <span>位，</span>
          <a :href="BASEURL + uploadSuccessInfo.failFile" target="_blank" v-if="uploadSuccessInfo.failFile">点击下载失败名单</a>
        </div>
      </div>
    </glsx-dialog>
    <!-- 批量导入 end -->

  </div>
</template>

<script>
import {
  GET_APPOINTMENTHANDLE_SEARCH,
  BASEURL,
  SAVE_APPOINTMENTHANDLE_HIMPORT,
  GET_APPOINTMENTHANDLE_EXPORT,
} from "@/http/finance";
import {
  showModal,
  showToast,
  deepClone,
  broadcast,
  received,
} from "@/common/util";
import { BOOKSTATUSLIST } from "@/common/constants";
import { exportExcel } from "@/common/common";
export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      loading: false,
      BOOKSTATUSLIST,
      showDialog: true,

      // 导入
      importDialog: false,
      uploadInfo: {},
      isSuccess: false,
      SAVE_APPOINTMENTHANDLE_HIMPORT,
      fileAccept: ".xlsx,.xls",
      uploadHeader: {},
      uploadSuccessInfo: {},
      BASEURL: BASEURL,

      // 导出
      eloading: false,
      GET_APPOINTMENTHANDLE_EXPORT,
    };
  },
  mounted() {
    let _this = this;
    let token = sessionStorage.getItem("token");
    this.uploadHeader = { Authorization: token };
    this.getList();
    received("customer.add.success", function () {
      _this.getList();
    });
  },
  methods: {
    // 格式化处理用户信息
    userFormatter(row) {
      let o = deepClone(row);
      o.id = row.clueId;
      o.customerName = o.name;
      o.customerPhone = o.phone;
      o.pageType = this.id;
      return o;
    },

    /** 获取用户列表 */
    getList(current) {
      let _this = this;
      let oParams = _this.getParams();
      oParams.pageNumber = current || _this.pageNumber;
      console.log(oParams);
      _this.loading = true;
      GET_APPOINTMENTHANDLE_SEARCH(oParams).then((res) => {
        console.log(res);
        _this.loading = false;
        let obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
      });
    },
    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let o = deepClone(this.formInline);
      let n = o.orderTime || [];
      if (n && n.length > 0) {
        o.orderStartTime = n[0];
        o.orderEndTime = n[1];
      }
      o.pageSize = this.pageSize;

      delete o.orderTime;
      return o;
    },

    /** 重置 */
    rest() {
      this.formInline = {};
      this.pageNumber = 1;
      this.getList();
    },

    // 打开处理弹框
    openDialog(row) {
      broadcast("appoint.dialog.open", row);
    },

    // 打开弹框
    openImportDialog(id) {
      this[id || "showDialog"] = true;
    },

    // 关闭弹框
    closeDialog(id) {
      // 导入弹框
      console.log(this.$refs);
      if (id == "importDialog") {
        //this.$refs.upload.clearFiles();
        this.uploadInfo = {};
        this.isSuccess = false;
      }

      this[id || "showDialog"] = false;
    },

    // 监听上传文件变化
    onFileChange(file) {
      console.log(file);
      this.uploadInfo = file;
    },

    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },

    // 监听文件导入成功
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.isSuccess = true;
        this.uploadSuccessInfo = response.data || {};
      } else {
        showToast({
          message: response.message,
        });
      }
    },

    // 导出excel
    downloadExcel() {
      let _this = this;
      let o = deepClone(_this.formInline);
      let m = Object.keys(o);
      if (m.length > 0) {
        showModal({
          message: "确定是否导出筛选条件下面所有预约处理列表?",
          showCancelButton: true,
          type: "warning",
          success: function () {
            _this.dowloadExcelFile();
          },
        });
        return false;
      }

      _this.dowloadExcelFile();
    },

    // 下载excel
    dowloadExcelFile() {
      let _this = this;
      let oParams = _this.getParams();
      let options = {};

      delete oParams.pageNumber;
      delete oParams.pageSize;

      options.method = "GET";
      options.data = oParams;
      options.url = GET_APPOINTMENTHANDLE_EXPORT;
      options.fileName = "预约处理列表.xlsx";
      _this.eloading = true;
      exportExcel(options).then((res) => {
        _this.eloading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload_box {
  padding: 20px 0 40px 0;

  .cell {
    display: flex;
    align-items: center;

    .name {
      .cred {
        color: #f00;
      }
    }

    .txt {
      display: flex;
      align-items: center;

      .a_input {
        margin-right: 10px;
      }

      .el_upload {
        display: flex;
        align-items: center;
      }
    }
  }

  .success_tips {
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: 24px;
      color: #67c23a;
      margin-right: 10px;
    }

    a {
      color: #167fff;
    }
  }
}
</style>
